<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>selector</title>

        <style>
            /*
                1. 元素选择器 
                    标签名{}
                2. id选择器 同一个页面中元素的 id 值应该是各不相同的
                    #id{} 如果有多个id，则使用 , 进行分割
                3. class选择器 同一个页面元素中的 class 值是可以重复的 且一个元素可以对应多个 class 值 多个 class 间使用空格进行分割
            */

            /* 元素选择器 */
            /* input{
                width: 80px;
                height: 40px;
                border-radius: 5px;
                background-color: bisque;
                font-size: larger;
                font-weight: bold;
                color: chocolate;
                border: 3px solid yellowgreen;
                font-family: serif;
                line-height: 30px;
                margin: 0px auto;
            } */

            /* id选择器 */
            /* #btn4, #btn5{
                width: 80px;
                height: 40px;
                border-radius: 5px;
                background-color: bisque;
                font-size: larger;
                font-weight: bold;
                color: chocolate;
                border: 3px solid yellowgreen;
                font-family: serif;
                line-height: 30px;
                margin: 0px auto;
            } */

            /* class选择器 */
            .shapeClass{
                width: 80px;
                height: 40px;
                border-radius: 5px;
                line-height: 30px; /* 行高 */
                margin: 0px auto;
            }
            .colorClass{
                background-color: bisque;
                color: chocolate;
                border:3px solid yellowgreen;
            }
            .fontClass{
                font-size: larger;
                font-weight: bold;
                font-family: serif;

            }
        </style>
    </head>
    <body>
        <input type="button" value="按钮1" id="btn1">
        <input type="button" value="按钮2" id="btn2" class="colorClass">
        <input type="button" value="按钮3" id="btn3" class="fontClass">
        <input type="button" value="按钮4" id="btn4" class="shapeClass">
        <input type="button" value="按钮5" id="btn5" class="shapeClass fontClass colorClass">
        <!-- 按钮还可以直接用 button 标签来创建 -->
        <button id="btn6">
            这里是一个按钮
        </button>
    </body>
    </html>
    